<template>
  <view>
    <view class="add-new" @click="albumAddNew">{{ addNewOn ? "×" : "+" }}</view>
    <view v-if="addNewOn" class="add-new-form">
      <form @submit="createNewAlbumSubmit">
        <view>
          <input
            class="input-form"
            type="text"
            placeholder="请输入相册名"
            name="albumName"
          />
          <textarea
            class="input-form"
            placeholder="请输入相册描述"
            name="albumDescription"
          ></textarea>
          <view class="input-form">
            <text>相册是否公开</text>
            <switch checked name="albumPublic" />
          </view>
        </view>
        <button type="primary" form-type="submit">新建相册</button>
      </form>
    </view>
    <view
      v-else
      class="album-thumbnail"
      v-for="(item, index) in albumList"
      :key="(item, index)"
      :data-albumid="item.name"
      @click="gotoAlbumDetail"
    >
      <image class="img-thumbnail" :src="item.thumbnail"></image>
      <view style="margin-left: 20upx">
        <view class="album-name">{{ item.name }}</view>
        <view class="album-discription">{{ item.discription }}</view></view
      >
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // TODO: 发送请求，获取已有的相册列表
      // 而后同步或异步地请求相册的预览页面
      albumList: [
        {
          thumbnail: "/static/temp_pics/pic1.jpeg",
          name: "12345620211211143149",
          discription: "测试相册1",
        },
        {
          thumbnail: "/static/temp_pics/pic2.jpeg",
          name: "相册2",
          discription: "测试相册2",
        },
      ],
      addNewOn: false,
    };
  },
  onLoad: function () {
    if (!this.hasLogin) {
      return;
    }
    console.log("数据请求中");
    // this.$http
    //   .post("/ShareYunAlbum/albumServlet", {
    //     option: "getAlbumID",
    //     User_id: this.localData.phone,
    //   })
    //   .then((res) => {
    //     console.log("ok", res);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //     uni.showToast({ title: "相册加载失败", icon: "error" });
    //   });
  },
  computed: mapState(["hasLogin", "localData"]),
  methods: {
    albumAddNew: function () {
      if (!this.hasLogin) {
        uni.navigateTo({ url: "/pages/login/login" });
        return;
      }
      if (!this.addNewOn) {
        console.log("new Album");
      }
      this.addNewOn = !this.addNewOn;
    },
    gotoAlbumDetail: function (e) {
      //   console.log(e);
      uni.navigateTo({
        url:
          "/pages/details/albumDetail" +
          "?albumid=" +
          e.currentTarget.dataset.albumid,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    createNewAlbumSubmit: function (e) {
      uni.showLoading({ title: "加载中" });
      let data = e.detail.value;
      let postdata = {
        option: "create",
        album_name: data.albumName,
        album_description: data.albumDescription,
        album_owner: this.localData.phone,
        album_public: data.albumPublic ? "pub" : "pri",
      };
      console.log(postdata);
      this.$http
        .post("/ShareYunAlbum/albumServlet", postdata)
        .then((res) => {
          uni.hideLoading();
          let status = res.data.status;
          console.log(res.data);
          switch (status) {
            case this.$responseCode.createAlbum.success: {
              uni.showToast({
                title: "创建成功" + res.data.album_createtime,
                icon: "success",
              });
              this.albumList.push({
                thumbnail: "/static/temp_pics/pic1.jpeg",
                name: data.albumName,
                discription: data.albumDescription,
              });
              break;
            }
            case this.$responseCode.createAlbum.fail: {
              uni.showToast({ title: "创建失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          uni.showToast({ title: "请求失败", icon: "error" });
          console.log(err);
        });
    },
  },
};
</script>

<style>
.form-item {
  margin: 20rpx auto;
  border-bottom: 1px solid grey;
  display: flex;
}
.album-thumbnail {
  border-bottom: 1px grey solid;
  padding: 20upx 30upx;
  display: flex;
}
.add-new {
  border-bottom: 1px grey solid;
  padding: 10upx;
  user-select: none;
  font-size: 2em;
  display: block !important;
  text-align: center;
  cursor: pointer;
}
.add-new:active,
.album-thumbnail:active {
  background-color: lightgrey;
}
.album-name {
  font-size: 1.1em;
}
.album-discription {
  font-size: 0.6em;
  color: grey;
}
.img-thumbnail {
  width: 100upx;
  height: 100upx;
  object-fit: cover;
}
.input-form {
  /* width: 100%; */
  border-bottom: grey 1px solid;
  font-size: 1em;
  padding: 0.5em 0.5em;
  display: flex;
  justify-content: space-between;
}
textarea {
  width: auto;
}
</style>